/**
 ** zhx.homepage scss
 ** Author: Vicco Wang
 ** Date: 2017/07/22
 **
 **/

$frame-base-color   : #403f3d;
$base-blue-color    : #03A9F4;
$base-green-color   : #009688;
$base-yellow-color  : #f0ad4e;
$base-red-color     : #C62828;
$base-purple-color  : #7B1FA2;
$base-orange-color  : #EF6C00;
$base-lighten-color : #E0E0E0;

$base-font-color : #212121;

@import "font/iconfont";

.zhx-homepage-wrapper{
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
  position:relative;
  background: lighten($frame-base-color,74%);

  ul,li{
    padding:0;
    margin:0;
    list-style:none;
  }

  input{
    outline:none;
  }

  .zhx-homepage-all-widgets{
    position:absolute;
    right:25px;
    top:45px;
    width:230px;
    height:0;
    display:none;
    background-color: lighten( $frame-base-color, 100%);
    border:1px solid lighten($frame-base-color,60%);
    border-radius:5px;
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
    overflow: hidden;
    user-select: none;

    .all-widgets-header{
      font-size:1.4em;
      height:80px;
      background-color: $base-blue-color;
      margin-bottom:5px;
      color : lighten( $frame-base-color, 100%);
      position:relative;

      span{
        position:absolute;
        bottom:10px;right:10px;
      }

    }

     ul{

       li{
          height:40px;
          display: flex;
          border-bottom:1px solid lighten( $frame-base-color, 65%);
          box-sizing: border-box;

          span{
            display: flex;
            height:100%;
            align-items: center;

            &.widget-title{
              flex:1;
              text-indent:12px;
            }
            &.widget-ctrl{
               width:50px;
               justify-content: center;
               cursor: pointer;

               &.disabled{
                  color : lighten( $frame-base-color, 65%);
                  cursor: default;
               }

               &:not(.disabled):hover{
                 background-color: lighten( $frame-base-color, 70%);
               }

            }

          }
       }
     }
  }

  .zhx-homepage-header{
    position:relative;
    height:35px;
    top:0;left:0;
    border-bottom:1px solid lighten($frame-base-color,60%);
    display: flex;
    justify-content: flex-end;

    .ctrl-button{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 15px;
      height:100%;
      background-color: lighten($frame-base-color,70%);
      cursor: pointer;
      color: lighten($frame-base-color,100%);

      &.add{
        background-color:$base-blue-color;
      }

      &.save{
        background-color : $base-green-color ;
      }
    }

  }

  .zhx-homepage-main{
    flex:1;
    padding:10px 0 20px 0;
    overflow-y:auto;

    .grid {
      .grid-stack-placeholder {
        .placeholder-content{
            border:2px dashed lighten($frame-base-color,50%);
            border-radius:5px;
        }
      }

      .grid-stack-item{
        .grid-stack-item-content {
          display: flex;
          left:5px;right:5px;
          flex-direction: column;
          color: #2c3e50;
          text-align: center;
          background-color: lighten($frame-base-color,100%);
          border:1px solid lighten($frame-base-color,60%);
          border-radius:5px;
          box-sizing:border-box;

          .grid-stack-item-header {
            position:relative;
            height:30px;
            background-color: lighten($frame-base-color,70%);
            border-bottom:1px solid lighten($frame-base-color,60%);
            display: flex;
            transition: all .3s ease 0s;

            .item-header-title{
              flex:1;
              display: flex;
              text-align: left;
              align-items: center;
              overflow:hidden;
              white-space: nowrap;
              text-overflow:ellipsis;
              text-indent:12px;
              cursor:move;
            }

            .item-header-title-input{
              display:flex;
              width:100%;
              align-items:center;
              padding:0 5px;

              input{
                width:100%;
                border:1px solid $base-blue-color;
                text-indent:5px;
                border-radius:3px;
              }

            }

            .item-header-ctrl{
              width:50px;

              ul{
                display: flex;
                height:100%;
                justify-content: flex-end;

                li{
                  width:45px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-right:1px solid lighten($frame-base-color,60%);

                  &.icon-more{
                    font-size:2em;
                    color: lighten($frame-base-color,20%);

                    &:before{
                      position:relative;
                      top:-2px;
                    }

                  }

                  &:hover{
                    background-color: lighten($frame-base-color,60%);
                  }

                  &:last-child{
                    border-right:none;
                  }

                }

              }

            }

          }

          .grid-stack-item-style {
            position:absolute;
            display:none;
            opacity:0;
            align-items: center;
            justify-content: center;
            top:0;right:10px;
            width:300px;
            height:50px;
            border-radius:5px;
            background-color:lighten($base-lighten-color,20%);
            border-bottom:1px solid darken($base-lighten-color, 10%);
            box-shadow:0 5px 5px rgba(0,0,0,.2);
            z-index:10;

            ul {
              padding:10px;
              flex:1;height:100%;
              display:flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;

              li {
                flex:none;
                margin:0 8px;
                width:30px;height:30px;
                border-radius:100px;
                cursor:pointer;

                &:hover{
                  opacity: .8;
                }

                &.normal { background-color: darken($base-lighten-color,10%); color: $frame-base-color;}
                &.red{ background-color: $base-red-color; color: #fff;}
                &.blue{ background-color: $base-blue-color; color:#fff;}
                &.green{ background-color: $base-green-color; color:#fff;}
                &.purple{ background-color: $base-purple-color; color:#fff;}
                &.orange{ background-color: $base-orange-color; color:#fff;}

              }

            }

          }

          .grid-stack-item-content-include{
            flex:1;
            width:100%;
            overflow:auto;
          }

        }

        &.red,
        &.green,
        &.blue,
        &.purple,
        &.orange {

          .grid-stack-item-header{
            color :#fff;

            input {
               color: $frame-base-color;
               border:none !important;
            }

            .item-header-ctrl > ul > li {
              &.icon-more{

                &:before{
                  color :#fff;
                }

              }

            }

          }

        }

        &.red {
           .grid-stack-item-header {
             background-color: $base-red-color !important;

             .item-header-ctrl > ul > li {
               &:hover {
                 background-color: lighten( $base-red-color, 10%);
               }

             }

           }

        }

        &.green {
          .grid-stack-item-header {
            background-color: $base-green-color !important;

            .item-header-ctrl > ul > li {
              &:hover {
                background-color: lighten( $base-green-color, 5%);
              }

            }

          }

        }

        &.blue {
          .grid-stack-item-header {
            background-color: $base-blue-color !important;

            .item-header-ctrl > ul > li {
              &:hover {
                background-color: lighten( $base-blue-color, 10%);
              }

            }

          }

        }

        &.purple {
          .grid-stack-item-header {
            background-color: $base-purple-color !important;

            .item-header-ctrl > ul > li {
              &:hover {
                background-color: lighten( $base-purple-color, 10%);
              }

            }
          }
        }

        &.orange {
          .grid-stack-item-header {
            background-color: $base-orange-color !important;

            .item-header-ctrl > ul > li {
              &:hover {
                background-color: lighten( $base-orange-color, 10%);
              }

            }
          }
        }

        &.normal {

        }

      }

    }

  }

  .empty-widgets {
    width:200px;
    font-size:1.5em;
    color : lighten($frame-base-color,50%);
    position:absolute;
    top:100px;left:50%;
    margin-left:-100px;
    text-align: center;
  }

  .auto-save-wrapper{
    position:absolute;
    left:50%;top:2px;
    width:0;height:35px;
    margin-left:0;
    background-color: $base-green-color;
    color: lighten($frame-base-color,100%);
    line-height:14px;
    text-align: center;
    padding:10px;
    border-radius:4px;
    overflow:hidden;
    opacity:0;

    span{
      display: block;
      width:130px;
      overflow:hidden;
    }
  }

  .zhx-homepage-debug{
    position:fixed;
    width:90%;
    height:200px;
    margin:0 50px;
    padding:15px;
    overflow:auto;
    bottom:10px;
    border:1px solid lighten($frame-base-color,65%);
    background-color:#fff;
    border-radius:5px;
    font-size:12px;
  }

}

/**
 * extends
 */
.angular-bootstrap-contextmenu.dropdown-menu{
  min-width:100px;

  li,a {
    outline: none;
  }

}